<template>
	<scroll-view scroll-y="true" class="content">
		<!-- 预约弹窗 -->
		<view class="maskClass" v-show="showMask">
			<view v-show="showMask" style="width: 70%; background-color: #fff; padding: 25px; border-radius: 15rpx; margin: 65rpx auto; z-index: 1">
				<view style="text-align: center">
					<text style="padding: 35rpx; font-size: 35rpx; font-weight: 700; text-align: center">请选择</text>
				</view>
				<view class="devideline"></view>
				<view class="login_from_input">
					<view class="form-left">预约时间</view>
					<view class="login_from_fun">
						<picker style="width: 100%" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view style="font-size: 25rpx; float: left">{{ date || '请选择预约时间' }}</view>
						</picker>
					</view>
				</view>
				<view class="login_from_input">
					<view class="form-left">
						<text>预约内容</text>
					</view>
					<view class="login_from_fun" style="height: 200rpx"><input v-model="orderInfo.content" placeholder="请输入服务内容" /></view>
				</view>
				<!-- <view class="login_from_input">
					<view class="form-left">联系电话</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="orderInfo.userTelphone" placeholder="请输入联系电话"></view>
				</view> -->
				<view class="submit_view">
					<button type="primary" class="submit" @click="submitOrder()">提交</button>
					<button type="warn" class="canncle" @click="closePopup()">取消</button>
				</view>
			</view>
		</view>
		<view class="login_from_input" @click="openPicker('safe')">
			<view class="form-left">信息安全</view>
			<view class="login_from_fun">
				<u--input v-model="formData.safeName" border="none" disabled disabledColor="#fff" placeholder="请选择"></u--input>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">
				姓名
				<span>*</span>
			</view>
			<view class="login_from_fun"><input type="text" v-model="formData.personName" placeholder="请输入姓名" /></view>
		</view>
		<view class="login_from_input" @click="openPicker('industry')">
			<view class="form-left">
				行业领域
				<span>*</span>
			</view>
			<view class="login_from_fun">
				<u--input v-model="formData.industryName" border="none" disabled disabledColor="#fff" placeholder="请选择行业领域"></u--input>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">专业方向</view>
			<view class="login_from_fun">
				<input type="text" v-model="formData.zyfx" placeholder="请输入专业方向" />
			</view>
		</view>
		<view class="login_from_input" @click="openPicker('serverType')">
			<view class="form-left">服务形式</view>
			<view class="login_from_fun">
				<u--input v-model="formData.serverTypeName" border="none" disabled disabledColor="#fff" placeholder="请选择服务形式"></u--input>
			</view>
		</view>
		<view class="login_from_input" @click="openPicker('workYear')">
			<view class="form-left">
				工作经验
				<span>*</span>
			</view>
			<view class="login_from_fun">
				<u--input v-model="formData.workYearName" border="none" disabled disabledColor="#fff" placeholder="请选择工作经验"></u--input>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">
				学历
				<span>*</span>
			</view>
			<view class="login_from_fun">
				<input type="text" v-model="formData.education" placeholder="请输入学历" />
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">学位</view>
			<view class="login_from_fun">
				<input type="text" v-model="formData.xw" placeholder="请输入学位" />
			</view>
		</view>
		<view class="login_from_input" @click="openPicker('salary')">
			<view class="form-left">
				期望薪资(元)/月
				<span>*</span>
			</view>
			<view class="login_from_fun">
				<u--input v-model="formData.salaryName" border="none" disabled disabledColor="#fff" placeholder="请选择期望薪资"></u--input>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">职称</view>
			<view class="login_from_fun">
				<!-- <input type="text" style="height: 400rpx;  white-space:normal; word-break:break-all; word-warp:break-word;" v-model="formData.description" placeholder="请输入需求描述"> -->
				<input type="text" v-model="formData.zc" placeholder="请输入职称" />
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">
				联系电话
				<span>*</span>
			</view>
			<view class="login_from_fun">
				<!-- <input type="text" style="height: 400rpx;  white-space:normal; word-break:break-all; word-warp:break-word;" v-model="formData.description" placeholder="请输入需求描述"> -->
				<input type="text" v-model="formData.phone" placeholder="请输入联系电话" />
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">工作经历</view>
			<view class="login_from_fun">
				<!-- <input type="text" style="height: 400rpx;  white-space:normal; word-break:break-all; word-warp:break-word;" v-model="formData.description" placeholder="请输入需求描述"> -->
				<textarea v-model="formData.workExper" placeholder="请输入工作经历"></textarea>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">学历证书</view>
			<view class="login_from_fun">
				<!-- <input type="text" style="height: 400rpx;  white-space:normal; word-break:break-all; word-warp:break-word;" v-model="formData.description" placeholder="请输入需求描述"> -->
				<u-upload
					:fileList="fileList.certificate"
					@afterRead="afterRead($event, 'certificate')"
					@delete="deletePic($event, 'certificate')"
					name="5"
					multiple
					:maxCount="1"
				></u-upload>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">个人照片</view>
			<view class="login_from_fun">
				<!-- <input type="text" style="height: 400rpx;  white-space:normal; word-break:break-all; word-warp:break-word;" v-model="formData.description" placeholder="请输入需求描述"> -->
				<u-upload :fileList="fileList.photo" @afterRead="afterRead($event, 'photo')" @delete="deletePic($event, 'photo')" name="6" multiple :maxCount="1"></u-upload>
			</view>
		</view>
		<view class="uni-form-item">
			<view v-if="submit == true" style="margin-bottom: 35rpx; background-color: #fff">
				<button type="primary" @click="submitNeeds()">提交</button>
			</view>
			<view v-if="submit != true" style="margin-bottom: 35rpx; background-color: #fff">
				<button type="primary" @click="intelligentMatch()">智能匹配</button>
			</view>
		</view>
		<view v-if="submit != true">
			<view style="text-align: center">匹配结果</view>
			<view v-for="(item, index) in macthList" :key="index">
				<view style="background-color: #fff; border-radius: 2%; padding: 20rpx; margin-top: 8rpx; height: 180rpx">
					<view>招聘公司：{{ item.data.company }}</view>
					<view style="margin-top: 8rpx">招聘岗位：{{ item.data.post }}</view>
					<view style="margin-top: 8rpx">工作地点：{{ item.data.workPlace }}</view>
					<view style="color: brown; float: left; width: 40%; margin-top: 8rpx">薪资待遇：{{ getMoney(item.data.salary) }}</view>
					<view style="color: #016fb8; float: left; width: 35%; margin-top: 8rpx">匹配度：{{ item.matchRatio }}</view>
					<view>
						<button style="float: right; width: 25%; height: 60rpx; background-color: #016fb8; font-size: 25rpx" type="primary" @click="toggle(item.data)">立即预约</button>
					</view>
				</view>
			</view>
		</view>
		<uni-popup v-if="canlendarShow">
			<tmt-calendar defaultDate="2021-11-03" :point-list="['2022-03-20', '2022-04-01', '2022-04-02', '2022-04-05']" show="canlendarShow" @changeDate="changeDate(e)"></tmt-calendar>
		</uni-popup>
		<u-picker :show="showPicker" :columns="columns" keyName="dictLabel" @cancel="cancel" @confirm="confirm"></u-picker>
		<u-toast ref="uToast"></u-toast>
	</scroll-view>
</template>

<script>
import * as mydata from '@/api/system/dict/data.js';
import * as needs from '@/api/personCenter/NEED';
import * as match from '@/api/intelligentMatch.js';
import * as need from '@/api/cgzh/index.js';
import env from '@/utils/env.js';
function getDate(type) {
	const date = new Date();

	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();

	if (type === 'start') {
		year = year - 10;
	} else if (type === 'end') {
		year = year + 10;
	}
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;

	return `${year}-${month}-${day}`;
}

export default {
	data() {
		return {
			show: false,
			token: '',
			formData: {
				certificate: '', //
				date1: '', //
				date2: '', //
				delivery: false, //
				desc: '', //
				education: '', //学历
				industry: '', //行业领域
				isissued: '', //
				memberid: '', //
				personName: '', //姓名
				phone: '', //联系电话
				photo: '', //照片
				region: '', //
				resource: '', //
				safe: '', //发布级别
				salary: '', //薪资
				serverType: '', //服务类型
				type: [], //
				workExper: '', //工作经理
				workYear: '', //工作年限
				xw: '', //学位
				zc: '', //职称
				zyfx: '' //专业方向
			},
			orderInfo: {
				contact: '', //
				content: '', //预约内容
				dataId: '', //
				detail: '', //
				needId: '', //需求ID
				receiverId: '', //
				subscribeTime: '', //预约时间
				telphone: '', //联系电话
				title: '', //招聘单位名字
				type: '2' //
			},
			selectJob: {},
			canlendarShow: false,
			submit: true,
			//发布级别
			levelArray: [],
			//发布级别选中项
			levelIndex: 0,
			//服务形式
			servicetypeArray: [],
			//服务形式选中项
			servicetypeIndex: 0,
			//行业领域
			industryArray: [],
			//行业领域选中项
			industryIndex: 0,
			//工作经验
			workyearArray: [],
			//工作经验选中项
			workyearIndex: 0,
			//薪资报酬
			moneyArray: [],
			//薪资报酬选中项
			moneyIndex: 0,
			//有效期
			timelimitArray: [],
			//有效期选中项
			timelimitIndex: 0,

			//截止时间选择相关
			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end'),
			macthList: [],
			showMask: false,
			certificateFileList: [],
			photoFileList: [],
			fileList: {
				certificate: [],
				photo: []
			},
			columns: [[]],
			showPicker: false
		};
	},
	onLoad() {
		this.formData.company = '陕西乐尚物联';
		this.getCityList();
		this.getUser();
	},
	methods: {
		confirm(item) {
			this.formData[this.activePicker] = item.value[0].dictValue;
			this.formData[this.activePicker + 'Name'] = item.value[0].dictLabel;
			console.log(item);
			this.showPicker = false;
		},
		cancel() {
			this.showPicker = false;
		},
		openPicker(flag) {
			this.activePicker = flag;
			this.columns = [];
			if (flag === 'safe') {
				this.columns.push(this.levelArray);
			}
			if (flag === 'industry') {
				this.columns.push(this.industryArray);
			}
			if (flag === 'serverType') {
				this.columns.push(this.servicetypeArray);
			}
			if (flag === 'workYear') {
				this.columns.push(this.workyearArray);
			}
			if (flag === 'salary') {
				this.columns.push(this.moneyArray);
			}
			this.showPicker = true;
		},
		afterRead(a, b) {
			uni.uploadFile({
				url: env.baseUrl + '/file/upload',
				filePath: a.file[0].url,
				name: 'file',
				success: (res2) => {
					var data = JSON.parse(res2.data);
					if (data.code == 200) {
						this.fileList[b].push({
							url: env.imgUrl + data.data.url
						});
						this.formData[b] = data.data.url;
					} else {
						uni.showModal({
							title: '提示信息',
							content: '上传失败！'
						});
					}
				}
			});
		},
		deletePic(a, b) {
			this.fileList[b].splice(this.fileList.length - 1, 1);
			this.formData[b] = null;
		},
		getUser() {
			const value = uni.getStorageSync('userInfo') || [];
			if (value.login_user == null) {
				uni.redirectTo({
					url: '/subpages/pages/register/login_province'
				});
				uni.showToast({
					icon: 'none',
					title: '请先登录！'
				});
			} else {
				this.token = value.access_token;
				this.formData.memberId = value.login_user.member.id;
			}
		},
		getCityList() {
			mydata.getDicts('wanted_safe').then((response) => {
				this.levelArray = response.data;
			});
			mydata.getDicts('bus_need_type').then((response) => {
				this.typeArray = response.data;
			});
			mydata.getDicts('cms_approve_status').then((response) => {
				this.statusList = response.data;
			});
			mydata.getDicts('bus_need_level').then((response) => {
				this.emergencyArray = response.data;
			});
			mydata.getDicts('bus_need_way').then((response) => {
				this.cooperationArray = response.data;
			});
			//招聘相关字典
			mydata.getDicts('wanted_time').then((response) => {
				this.timelimitArray = response.data;
			});
			mydata.getDicts('wanted_exp').then((response) => {
				this.workyearArray = response.data;
			});
			mydata.getDicts('wanted_type').then((response) => {
				this.servicetypeArray = response.data;
			});
			mydata.getDicts('wanted_industry').then((response) => {
				this.industryArray = response.data;
			});
			mydata.getDicts('wanted_safe').then((response) => {
				this.levelArray = response.data;
			});
			mydata.getDicts('cms_money').then((response) => {
				this.moneyArray = response.data;
			});
		},
		selectPics() {
			var that = this;
			uni.chooseImage({
				count: 3,
				success: (res) => {
					const files = res.tempFiles;
					let imgArr = [];
					for (let i = 0; i < files.length; i++) {
						let obj = new Object();
						obj.name = 'photo' + i;
						obj.uri = files[i].path;
						that.fileList.push(obj);
					}
				}
			});
		},
		submitNeeds() {
			if (this.formData.personName == '') {
				uni.showToast({
					icon: 'none',
					title: '姓名不能为空！'
				});
			} else if (this.formData.industry == '') {
				uni.showToast({
					icon: 'none',
					title: '行业领域不能为空！'
				});
			} else if (this.formData.workYear == '') {
				uni.showToast({
					icon: 'none',
					title: '工作经验不能为空！'
				});
			} else if (this.formData.education == '') {
				uni.showToast({
					icon: 'none',
					title: '学历不能为空！'
				});
			} else if (this.formData.salary == '') {
				uni.showToast({
					icon: 'none',
					title: '薪资报酬不能为空！'
				});
			} else if (this.formData.lxr == '') {
				uni.showToast({
					icon: 'none',
					title: '联系人不能为空！'
				});
			} else if (this.formData.phone == '') {
				uni.showToast({
					icon: 'none',
					title: '联系电话不能为空！'
				});
			} else if (this.formData.companyNum == '') {
				uni.showToast({
					icon: 'none',
					title: '职位介绍不能为空！'
				});
			} else if (this.formData.postInfo == '') {
				uni.showToast({
					icon: 'none',
					title: '需求描述不能为空！'
				});
			} else {
				uni.showModal({
					title: '提示',
					content: '确认该招聘信息无误并提交吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '提交',
					success: (res) => {
						if (res.confirm) {
							// console.log('comfirm') //点击确定之后执行的代码
							needs.jobWanted(this.formData).then((res) => {
								this.formData = res.data;
								uni.showToast({
									title: '提交成功！'
								});
								this.submit = false;
							});
						} else {
							console.log('cancel'); //点击取消之后执行的代码
						}
					}
				});
			}
		},
		intelligentMatch() {
			var needString =
				'zyfx=' +
				this.formData.zyfx +
				'&serverType=' +
				this.formData.serverType +
				'&zc=' +
				this.formData.zc +
				'&education=' +
				this.formData.education +
				'&phone=' +
				this.formData.phone +
				'&salary=' +
				this.formData.salary +
				'&personName=' +
				this.formData.personName +
				'&workYear=' +
				this.formData.workYear +
				'&delivery=' +
				this.formData.delivery +
				'&industry=' +
				this.formData.industry +
				'&memberId=' +
				this.formData.memberid +
				'&xw=' +
				this.formData.xw +
				'&id=' +
				this.formData.id;
			match.rcneed(needString).then((res) => {
				this.macthList = res.data;
				console.log(this.macthList);
			});
		},
		changeDate(e) {
			this.canlendarShow = false;
			var year = e.year;
			var month = e.month;
			if (month < 10) {
				month = '0' + month;
			}
			var day = e.day;
			if (day < 10) {
				day = '0' + month;
			}

			this.formData.deadline = year + '-' + month + '-' + day;
		},
		cooperationChange(e) {
			this.cooperationIndex = e.target.value;
			this.formData.hzfs = this.cooperationArray[this.cooperationIndex].dictValue;
		},
		typeChange(e) {
			this.typeIndex = e.target.value;
			this.formData.type = this.typeArray[this.typeIndex].dictValue;
		},
		cityChange(e) {
			this.cityIndex = e.target.value;
			this.formData.city = this.cityArray[this.cityIndex].dictValue;
		},
		bindDateChange(e) {
			this.date = e.detail.value;
			this.orderInfo.subscribeTime = e.detail.value;
		},
		emergencyChange(e) {
			this.emergencyIndex = e.target.value;
			this.formData.jjcd = this.typeArray[this.typeIndex].dictValue;
		},
		//招聘下拉框
		levelChange(e) {
			this.levelIndex = e.target.value;
		},
		industryChange(e) {
			this.industryIndex = e.target.value;
		},
		servicetypeChange(e) {
			this.servicetypeIndex = e.target.value;
		},
		workyearChange(e) {
			this.workyearIndex = e.target.value;
		},
		moneyChange(e) {
			this.moneyIndex = e.target.value;
		},
		timelimitChange(e) {
			this.timelimitIndex = e.target.value;
		},
		getMoney(index) {
			console.log(this.moneyArray);
			console.log(index);
			return this.moneyArray.find((item) => item.dictValue === index).dictLabel;
		},
		toggle(item) {
			console.log('弹窗');
			this.selectJob = item;
			// this.$refs['orderpopup'].open();
			this.showMask = true;
		},
		closePopup() {
			// this.$refs['orderpopup'].close();
			this.showMask = false;
		},
		submitOrder() {
			this.orderInfo.type = 2;
			this.orderInfo.needId = this.formData.id;
			this.orderInfo.title = this.selectJob.company; //数据标题
			this.orderInfo.dataId = this.selectJob.id;
			this.orderInfo.contact = this.selectJob.lxr;
			this.orderInfo.telphone = this.selectJob.phone;
			this.orderInfo.receiverId = this.selectJob.memberId;
			need.needLog(this.orderInfo).then((res) => {
				if (res.code == '200') {
					this.showMask = false;
					this.$refs.uToast.show({
						type: 'success',
						message: '预约成功',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '提交失败，请稍后重试！'
					});
				}
			});
		}
	}
};
</script>

<style scoped>
.content {
	height: 100%;
	background-color: #e5e5e5;
	padding-bottom: 20rpx;
}
.maskClass {
	width: 100%;
	position: fixed;
	background-color: #fff;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.content span {
	color: darkred;
}

.uni-form-item {
	margin: 60rpx 30rpx;
	border-radius: 50px;
}

.uni-form-item button {
	background-color: #016fb8;
	height: 90rpx;
	font-size: 35rpx;
	margin-top: 50rpx;
}

.login_from_input {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px #eee solid;
	padding: 20upx 0px;
	margin: 0px auto;
	background-color: #fff;
}

.login_from_name {
	width: 30%;
	margin-left: 40rpx;
	font-size: 30rpx;
}

.login_from_fun {
	width: 70%;
	/* display: flex;
		flex-direction: row;
		justify-content: flex-end;
		text-align: right; */
}

.login_from_fun input {
	width: 100%;
	text-align: left;
	font-size: 14px;
}

.detail {
	background-color: #fff;
	margin-top: 25rpx;
	height: 400rpx;
}

.form-left {
	margin-left: 16px;
	padding: 5rpx 0;
}

.form-right {
	margin-top: 6px;
	margin-left: 6px;
	padding: 5px 0;
	width: 90%;
	border: 1px solid #d8d8d8;
	border-radius: 3px;
}

.upLoadImg {
	width: 96rpx;
	height: 96rpx;
	background-color: #ffffff;
	margin-top: 16rpx;
	margin-left: 6px;
}

.devideline {
	float: left;
	height: 0.3rpx;
	width: 100%;
	background-color: #eeeeee;
	margin-top: 25rpx;
	margin-bottom: 15rpx;
}

textarea {
	margin-right: 20rpx;
	height: 300rpx;
	word-wrap: break-word;
	text-align: left;
	font-size: 15px;
}
</style>
